<template>
  <div class="douyin-loading-container">
    <div class="loading-content">
      <div class="loading-icon">
        <img src="../../assets/imgs/login/dy_logo.png" style="width: 120px;height: 120px;" />
      </div>
      <div class="loading-text">正在处理抖音登录...</div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as authUtil from '@/utils/auth'
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()
const message = useMessage()
const { push, replace } = useRouter()
// http://10.8.0.7:81/douYinLoading?provider=douyin&status=success
// 处理抖音登录回调
const handleDouyinCallback = async () => {
  // 获取URL参数中的token值
  const urlParams = new URLSearchParams(window.location.search)
  const status = urlParams.get('status') //抖音跳转状态
  console.log('抖音登录status:', status)
  
  if (status === 'success') {
    message.success('抖音绑定成功，跳转到首页')
    setTimeout(async () => {
      // 跳转到首页
      await push({ path: '/' })
    }, 1000);
  }else{
    message.error('抖音绑定失败，跳转登录页')
    setTimeout(async () => {
      // 返回登录页
      await goLogin()
    }, 1000);
  }
}
// 返回登录
async function goLogin() {
  await userStore.loginOut()
  replace('/login?redirect=/index')
}
// 组件挂载时执行
onMounted(() => {
  handleDouyinCallback()
})
</script>

<style scoped>
.douyin-loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-content {
  text-align: center;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.6s ease-out;
}

.loading-icon {
  margin-bottom: 20px;
  animation: pulse 2s ease-in-out infinite;
}

.loading-text {
  font-size: 16px;
  color: #64748b;
  font-weight: 500;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
</style>